<script setup lang="ts">
import {
  Setting,
  Document,
  UserFilled,
  View
} from '@element-plus/icons-vue'

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :router="true"
          default-active="/manage/message/customerMessage"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="/manage/message/customerMessage">
            <el-icon><Document /></el-icon>
            <span>客户信息</span>
          </el-menu-item>
          <el-menu-item index="/manage/message/productMessage">
            <el-icon><setting /></el-icon>
            <span>产品信息</span>
          </el-menu-item>
          <el-menu-item index="/manage/message/milkmanMessage">
            <el-icon><UserFilled /></el-icon>
            <span>送奶工管理</span>
          </el-menu-item>
           <el-menu-item index="/manage/message/Statement">
            <el-icon><View /></el-icon>
            <span>计划报表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main class="main-container">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.common-layout {
  width: calc(100% - 10px);
  margin-left: 10px;
  .el-menu-vertical-demo {
    border-radius: 4px;
    border:  1px solid #e4e7ed;
  }
  .main-container {
    width: calc(100% - 210px);
    padding: 0 10px;
  }
}

</style>
